import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Text } from 'native-base';

class Option extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  _getOptionsItem = () => {
    const items = [];
    this.props.optionsList.forEach((item, index) => {
      const style = index === this.props.ckIndex ? styles.optionsItemCk : styles.optionsItem;
      items.push(
        <Text
          style={[style, this.props.style]}
          key={index}
          onPress={() => { this.props.onClick(item, index); }}
        >
          {item}
        </Text>,
      );
    });
    return items;
  }

  render() {
    return (
      <View style={[styles.optionsContiner, this.props.containerStyle]}>
        {this._getOptionsItem()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  optionsContiner: {
    display: 'flex',
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: 20,
    paddingRight: 20,
  },
  optionsItem: {
    padding: 10,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#ffffff',
    color: '#ffffff',
    marginRight: 10,
  },
  optionsItemCk: {
    padding: 10,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#207aff',
    color: '#ffffff',
    backgroundColor: '#207aff',
    marginRight: 10,
  },
});

export default Option;
